<template>
  <div class="">
    <!-- <sec-demo :data="data" :diaShow.sync="diaShow"></sec-demo> -->
    <!-- <el-button type="primary" @click="save">保存</el-button> -->
    <!-- <el-checkbox-group @change="checkChange" v-model="item.checkIds" v-for="(item, index) in data" :key="index">
      <el-checkbox
        :disabled="checkDis(item, child)"
        :label="child.value"
        v-for="(child, i) in item.children"
        :key="i"
        >{{ child.label }}</el-checkbox
      >
    </el-checkbox-group> -->
    <el-select v-model="value" filterable multiple placeholder="请选择">
      <el-option v-for="item in options" :key="item.tagCode" :label="item.tagName" :value="item.tagCode"> </el-option>
    </el-select>
    <!-- <el-transfer
      v-model="value"
      :props="{
        key: 'value',
        label: 'desc',
      }"
      :data="data"
    >
    </el-transfer> -->
  </div>
</template>

<script>
import secDemo from "./demo1.vue";
import { tagAllApi } from "api/configApi";
export default {
  name: "",
  props: {},
  components: {
    secDemo,
  },
  data() {
    const generateData = (_) => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          value: i,
          desc: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return data;
    };
    console.log(generateData());
    return {
      data: generateData(),
      value: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  computed: {},
  mounted() {
    tagAllApi().then((res) => {
      this.options = res.data || [];
    });
  },
  methods: {
    checkDis(item, child) {
      if (item.checkIds.length > 0) {
        let { children } = item;
        let isObj = children.find((item) => item.is == 1);
        //选中的是无上述的时候
        if (item.checkIds.includes(isObj.id)) {
          return child.id != isObj.id && true;
        } else {
          return child.id == isObj.id && true;
        }
      }
    },
    checkChange() {},
    save() {
      console.log(this.data);
      console.log(this.diaShow);
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
